<template>
  <VPage>
    <VTable ref="tableRef" v-bind="tableOptins">
      <template #form="{ form }">
        <VGroup>
          <div class="v-group-item">费用类型</div>
          <el-select v-model="form.status" style="max-width: 200px" multiple collapse-tags clearable placeholder="表发状态">
            <el-option v-for="(d, i) in statusOption" :key="i" :label="d.label" :value="d.value"></el-option>
          </el-select>
        </VGroup>
        <VGroup>
          <div class="v-group-item">计费方式</div>
          <el-select v-model="form.shop_manager_id" style="max-width: 200px" multiple collapse-tags clearable placeholder="表发状态">
            <el-option v-for="(d, i) in []" :key="i" :label="d.label" :value="d.value"></el-option>
          </el-select>
        </VGroup>
        <VGroup>
          <div class="v-group-item">发货类型</div>
          <el-select v-model="form.shop_clerks_id" style="max-width: 200px" multiple collapse-tags clearable placeholder="表发状态">
            <el-option v-for="(d, i) in []" :key="i" :label="d.label" :value="d.value"></el-option>
          </el-select>
        </VGroup>
        <VGroup>
          <div class="v-group-item">发货仓库</div>
          <el-select v-model="form.customer_service_id" style="max-width: 200px" multiple collapse-tags clearable placeholder="表发状态">
            <el-option v-for="(d, i) in []" :key="i" :label="d.label" :value="d.value"></el-option>
          </el-select>
        </VGroup>
        <VGroup>
          <div class="v-group-item">状态</div>
          <el-select v-model="form.order_priority_level" style="max-width: 200px" multiple collapse-tags clearable placeholder="表发状态">
            <el-option v-for="(d, i) in []" :key="i" :label="d.label" :value="d.value"></el-option>
          </el-select>
        </VGroup>
        <VGroup>
          <div class="v-group-item">费用说明</div>
          <el-select v-model="form.is_download_orders" style="max-width: 200px" multiple collapse-tags clearable placeholder="表发状态">
            <el-option v-for="(d, i) in []" :key="i" :label="d.label" :value="d.value"></el-option>
          </el-select>
        </VGroup>
        <VGroup>
          <div class="v-group-item">添加人</div>
          <el-select v-model="form.is_pre_generate" style="max-width: 200px" multiple collapse-tags clearable placeholder="表发状态">
            <el-option v-for="(d, i) in []" :key="i" :label="d.label" :value="d.value"></el-option>
          </el-select>
        </VGroup>
        <VGroup>
          <div class="v-group-item">添加时间</div>
          <el-date-picker v-model="form.dateRange.value" type="daterange" range-separator="至" start-placeholder="Start date" end-placeholder="End date" style="max-width: 300px" />
        </VGroup>
      </template>
      <template #toolbar_btns>
        <div>
          <el-dropdown trigger="click" @command="batchOptionsEvent" class="mr5">
            <el-button type="primary">
              批量操作
              <div class="dk-iconfont icon-ArrowDown"></div>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu v-matomo>
                <el-dropdown-item :command="item.value" v-for="item in batchOptions">{{ item.label }}</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <el-button type="primary" class="ml-auto mr5">启用</el-button>
          <el-button type="primary" class="ml-auto mr5">禁用</el-button>
        </div>
      </template>
    </VTable>
    <Add ref="addRef" :options="options" @success="query" />
    <VLog ref="logRef" />
  </VPage>
</template>

<script setup lang="jsx" name="basic-setupCost-setting">
import api from "./api"
import VLog from "@/components/VLog"
import { getOption } from "@/api/public"
import { ElMessage } from "element-plus"
import XEUtils from "xe-utils"
const batchOptions = [
  {
    label: "批量设置下载订单",
    value: "0",
  },
  {
    label: "批量设置生成追踪号",
    value: "1",
  },
  {
    label: "批量设置标记平台发货",
    value: "2",
  },
  {
    label: "批量设置客服人员",
    value: "3",
  },
  {
    label: "批量设置IOSS税号",
    value: "4",
  },
  {
    label: "批量上传店铺发货地址",
    value: "5",
  },
  {
    label: "批量上传店铺发票地址",
    value: "6",
  },
]
const statusOption = [
  {
    label: "启用",
    value: "0",
  },
  {
    label: "禁用",
    value: "1",
  },
]
const tableRef = ref()
const logRef = ref()
const loadings = reactive({})
//批量操作
const batchOptionsEvent = (val) => {}
// 查询
const query = () => {
  tableRef?.value.query()
}

// 获取options
const options = ref({})
getOption({ type: "purchase_account" }).then((res) => {
  options.value = res.data
})

// 列表配置
const tableOptins = reactive({
  formConfig: {
    data: {
      platform: [],
      site: [],
      shop: [],
      status: "",
      shop_manager_id: [],
      shop_clerks_id: [],
      customer_service_id: [],
      order_priority_level: "",
      is_download_orders: "",
      is_pre_generate: "",
      is_platform_shipment: "",
    },
  },
  columns: [
    { type: "checkbox", fixed: "left", width: 60 },
    { field: "id", title: "ID", width: 100 },
    { field: "platform", title: "平台/站点", minWidth: 120 },
    { field: "shop_code", title: "店铺代号", width: 120 },
    { field: "operating_costs", title: "运营成本", width: 140 },
    { field: "shop_manager", title: "店铺负责人员", width: 100 },
    { field: "shop_clerks", title: "店铺店员", minWidth: 120 },
    { field: "customer_service", title: "客服人员", width: 120 },
    { field: "update_time", title: "更新时间", width: 150 },
    { field: "status", title: "状态", width: 90 },
    { field: "create_time", title: "创建时间", width: 70 },
    { field: "update_time", title: "更新时间", width: 70 },
    {
      title: "操作",
      width: 150,
      fixed: "right",
      slots: {
        default: ({ row, rowIndex }) => {
          const { pa_id } = row
          return [
            <div>
              <el-button link type="primary" onClick={() => addRef?.value.open(pa_id)}>
                详情
              </el-button>
              <el-button link type="primary" onClick={() => logRef?.value.open({ log_type: "purchase_account", pa_id })}>
                日志
              </el-button>
            </div>,
          ]
        },
      },
    },
  ],
  proxyConfig: {
    ajax: {
      query: ({ page, form }) => api.query({ ...form, ...page }),
    },
  },
})
</script>
<style lang="scss" scoped>
.mr5 {
  margin-right: 5px;
}
</style>
